<template>
    <el-dialog v-model="visible" title="三维模型展示" width="780px" class="modelDetails" @opened="initCanvas">
        <div class="model-display">
            <canvas id="treeDModel"></canvas>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,watch,nextTick} from 'vue';
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const visible = ref(false)

defineProps({
    model_file: {
        type: String,
        default: ''
    }
})
// 监视visible变化
watch(() => visible.value, () => { 
    scene.clear();
    scene.add(axesHelper);
    scene.add(directionalLight);
    scene.add(ambient);
    // 重置相机角度
    camera.position.set(80, 80, 80);
})

const scene = new THREE.Scene();

const gltfLoader = new GLTFLoader();

const open = (data:any) => {
    visible.value = true;
    if(data){
        // gltfLoader.load("/public/model/body.glb",
        gltfLoader.load(data.model_file,
            (gltf) => {
                scene.add(gltf.scene);
            }
        );
    }
}

//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

//光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.0);
directionalLight.position.set(200, 200, 200);
scene.add(directionalLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambient);


const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(80, 80, 80);
camera.lookAt(0, 0, 0);

// const renderer = new THREE.WebGLRenderer({
//     antialias:true,
// });
// renderer.setSize(width, height);
// document.body.appendChild(renderer.domElement);

// renderer.setPixelRatio(window.devicePixelRatio);



const initCanvas = () => {
    nextTick(() => {
        const canvas = document.getElementById('treeDModel') as HTMLCanvasElement;
        if (!canvas) {
            console.error('Canvas element not found');
            return;
        }

        const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
        });

        const width = canvas.clientWidth;
        const height = canvas.clientHeight;

        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0xffffff, 1);

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        const controls = new OrbitControls(camera, renderer.domElement);
        // 设置带阻尼的惯性
        controls.enableDamping = true;
        // 设置阻尼系数
        controls.dampingFactor = 0.1;
        controls.rotateSpeed = 0.14;

        function render() {
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();
    });
};


defineExpose({ open })

</script>

<style lang="less" scoped>
.model-display{
    width: 100%;
    height: 500px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center; // 水平居中
    align-items: center;     // 垂直居中

    canvas{
        width: 100%;
        height: 400px;
        border-radius: 10px;
        box-shadow:  0 4px 10px rgba(0, 0, 0, 0.2);
    }
}

</style>